<template>
  <el-dialog title="新增种植信息表"
             :visible.sync="visible">
    <el-form class="form">
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">产品名称</label>
        <el-select v-model="formData.productId"
                   class="sel2"
                   placeholder="请选择"
                   style="width: 186px;">
          <el-option v-for="item in productList"
                     :key="item.product_id"
                     :label="item.product_name"
                     :value="item.product_id" />
        </el-select>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">员工姓名</label>
        <el-select v-model="formData.employeeId"
                   class="sel2"
                   placeholder="请选择"
                   style="width: 186px;">
          <el-option v-for="item in employeeList"
                     :key="item.employee_id"
                     :label="item.employee_name"
                     :value="item.employee_id" />
        </el-select>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">收割方式</label>
        <el-select v-model="formData.yieldMethod">
          <el-option v-for="item in yieldMethodOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"> </el-option>
        </el-select>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">产量（吨）</label>
        <el-input-number v-model="formData.yield"></el-input-number>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">收割时间</label>
        <el-date-picker v-model="formData.harvestTime"
                        type="datetime"
                        class="in"
                        style="width: 186px;"
                        autocomplete="off"
                        placeholder="收割时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">备注</label>
        <el-input v-model="formData.remark"
                  class="in"
                  style="width: 186px;"
                  autocomplete="off" />
      </div>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary"
                 @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPlantById } from '@/api/plant/plant'
import { saveHarvest } from '@/api/plant/harvest'
import { getAllProduct } from "@/api/plant/product"
import { getAllEmployee } from "@/api/plant/employee"
import { yieldMethodList } from "@/config/dict/trace"
export default {
  data () {
    return {
      visible: false,
      formData: {
        id: '',
        plantId: '',
        employeeId: '',
        employeeName: '',
        productId: '',
        harvestTime: '',
        yield: 0,
        yieldMethod: '',
        remark: '',
        areaId: ''
      },
      area: {},
      plant: {},
      employeeList: [],
      productList: [],
      yieldMethodOption: yieldMethodList
    }
  },
  methods: {
    async init (area, plant) {
      this.area = area
      this.plant = plant
      this.visible = true
      this.area = area;
      this.formData = {
        id: '',
        plantId: '',
        employeeId: '',
        employeeName: '',
        productId: '',
        harvestTime: '',
        areaId: '',
        yield: 0,
        yieldMethod: '',
        remark: '',
      }
      if (area) {
        this.formData.plantId = area.plantId
        this.formData.areaId = area.id
      } else if (plant) {
        this.formData.plantId = plant.id
        this.formData.areaId = plant.areaId
        this.formData.productId = plant.productId
      }
      this.getEmployee()
      getPlantById(this.formData.plantId).then(res => {
        console.log(res)
        const plant = res.data
        if (plant) {
          this.formData.productId = plant.productId
        }
      })
      getAllProduct().then(res => {
        this.productList = res.data
      })
    },
    async getEmployee () {
      getAllEmployee().then(res => {
        this.employeeList = res.data
      })
    },
    confirm () {
      for (let i = 0; i < this.productList.length; i++) {
        const e = this.productList[i]
        if (e.product_id == this.formData.productId) {
          this.formData.productName = e.product_name
        }
      }
      for (let i = 0; i < this.employeeList.length; i++) {
        const e = this.employeeList[i]
        if (e.employee_id == this.formData.employeeId) {
          this.formData.employeeName = e.employee_name
        }
      }
      saveHarvest(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
